{include file='public:header-css'/}
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    {include file='public:left-menu'/}
    <!--End 左侧导航-->
    <!--头部信息-->
    {include file='public:nav-header' title="系统管理" subTitle="添加编辑运费模板"/}
    <!--End 头部信息-->

    <!--页面主要内容-->
    <main class="lyear-layout-content" id="app">

      <div class="container-fluid">

        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                <form action="" id="submit-form" method="post">
                  <div class="form-group ">
                    <label class="form-title"><em class="require">*</em>模板名称</label>
                    <input type="text" class="form-control" name="name" value="{$info.name}" placeholder="请输入模板名称"/>
                    <span class="error" id="err_name"></span>
                  </div>
                  <div class="form-group">
                    <div class="row">
                      <div class="col-md-3">
                        <label class="form-title"><em class="require">*</em>首重</label>
                        <input type="text" class="form-control" name="frist_weight" value="{$info.frist_weight}" placeholder="请输入首重"/>
                        <span class="error" id="err_frist_weight"></span>
                      </div>
                      <div class="col-md-3">
                        <label class="form-title"><em class="require">*</em>首重运费</label>
                        <input type="text" class="form-control" name="frist_money" value="{$info.frist_money}" placeholder="请输入首重运费"/>
                        <span class="error" id="err_frist_money"></span>
                      </div>
                      <div class="col-md-3">
                        <label class="form-title"><em class="require">*</em>续重</label>
                        <input type="text" class="form-control" name="second_weight" value="{$info.second_weight}" placeholder="请输入续重"/>
                        <span class="error" id="err_second_weight"></span>
                      </div>
                      <div class="col-md-3">
                        <label class="form-title"><em class="require">*</em>续重运费</label>
                        <input type="text" class="form-control" name="second_money" value="{$info.second_money}" placeholder="请输入续重运费"/>
                        <span class="error" id="err_second_money"></span>
                      </div>
                    </div>
                  </div>
                  <div class="card-header">
                      <h4>选择地区</h4>
                      <a class="btn btn-label btn-theme" href="javascript:;" @click="addShippingArea"><label><i class="mdi mdi-checkbox-marked-circle-outline"></i></label> 新增自定义区域</a>
                  </div>
                    <div id="form">
                        <table class="table table-bordered table-striped table-hover">
                            <thead>
                            <tr>
                                <th>选择区域</th>
                                <th>首重</th>
                                <th>首重运费</th>
                                <th>续重</th>
                                <th>续重运费</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="tbody">
                            <tr class="parent" v-for="(item,index) in area_list" :key="item.temp_id">
                                <td class="area">
                                    <div @click="checkArea(index,item)">
                                        <div v-if="item.area_text!=''">{{item.area_text}}</div>
                                        <input type="text" readonly class="table-input" placeholder="请选择区域" v-else>
                                        <input type="hidden" :name="`shipping_area[${index}][area]`" v-model="item.area">
                                        <input type="hidden" :name="`shipping_area[${index}][id]`" v-model="item.id">
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <input type="text" :name="`shipping_area[${index}][frist_weight]`" v-model="item.frist_weight" class="table-input" placeholder="首重">
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <input type="text" :name="`shipping_area[${index}][frist_money]`" v-model="item.frist_money" class="table-input" placeholder="首重运费">
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <input type="text" :name="`shipping_area[${index}][second_weight]`" v-model="item.second_weight" class="table-input" placeholder="续重">
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <input type="text" :name="`shipping_area[${index}][second_money]`" v-model="item.second_money" class="table-input" placeholder="续重运费">
                                    </div>
                                </td>
                                <td>
                                    <a class="table-btn btn-danger" @click="del(index)"><i class="mdi mdi-delete"></i>删除</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                  <div>
                    <input type="hidden" name="{$info.pk}" value="{$info[$info.pk]}">
                    <button type="button" class="btn-theme submit-btn">确定</button>
                  </div>
                </form>
              </div>
            </div>
        </div>
      </div>
     </div>
    </main>
    <!--End 页面主要内容-->
    <style>
        .lyear-checkbox span::before{
            border-radius: 3px;
        }
        .checkbox-primary input:checked ~ span::before {
            background-color: var(--theme);
            border-color: var(--theme);
        }
        .card-header{
            padding: 15px 0;
            display: flex;
            align-items: center;
            border-bottom: none;
        }
        .card-header h4{
            margin-right: 10px;
        }
        .table-input{
            min-width: 140px;
        }
        .area{
            max-width: 200px;
        }
    </style>
<script type="text/javascript">
    var _this;
    var app = new Vue({
        el: '#app',
        data: {
            temp_index:-1,
            area_list:JSON.parse('{:json_encode($area_list)}')||[]
        },
        created() {
            _this=this;
        },
        methods: {
            addShippingArea(){
                let id=parseInt(new Date().getTime()*Math.random()*100)
                let item={'area':'','area_text':'','frist_weight':'','frist_money':'','second_weight':'','second_money':'','temp_id':id,'id':0}
                _this.area_list.push(item)
            },
            del(index){
                _this.area_list.splice(index,1)
            },
            checkArea(index,item){
                _this.temp_index=index
                var url = "{:url('System/choose_area')}?id="+item.id;
                layer.open({
                    type: 2,
                    title: '选择地区',
                    shadeClose: true,
                    shade: 0.2,
                    area: ['1065px', '664px'],
                    content: url,
                });
            }
        },
        mounted(){
            window.confirmArea=function (area,area_text) {
                _this.area_list[_this.temp_index]['area']=area
                _this.area_list[_this.temp_index]['area_text']=area_text.join(',')
                layer.closeAll()
            }
        }
    });
  $(function(){
    $('.submit-btn').click(function () {
      $('span.error').hide();
      $('span.error').parent().removeClass('has-error');
      var url = "{:url('System/add_edit_shipping',[$info.pk=>$info[$info.pk]])}";
      var data = $('#submit-form').serialize();
      $.ajax({
        type: "POST",
        url: url,
        data: data,
        dataType: 'json',
        success: function (data) {
          if (data.code == 1) {
            showSuccessMsg(data.msg, function () {
              if (data.data.url) {
                location.href = data.data.url;
              }
            });
          } else if (data.code == 10) {
              showErrorMsg(data.msg);
            $.each(data.data.result, function(index, item) {
              $('#err_' + index).text(item).show();
              $('#err_' + index).parent().addClass('has-error');
            });
          }else {
              showErrorMsg(data.msg);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            showErrorMsg("网络失败，请刷新后重试!");
        }
      });
    });
    $('input.checkbox-parent').on('change', function(){
      var dataid = $(this).attr("dataid");
      $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
    });
  });
</script>
</body>
</html>
